<template>
 <el-row>
   <el-row style="background-color:#d5d5d5;margin-top:10px;">
     <el-col :span="12" :xs="24">
       <span>欢迎进入时尚小院！</span>
        <span><el-link>请登录</el-link></span>
        <span><el-link>快速注册</el-link></span>
     </el-col>
      <el-col :span="12" :xs="24" style="padding-top:2px;">
        <el-breadcrumb separator="  ">
          <el-breadcrumb-item>商品真实</el-breadcrumb-item>
          <el-breadcrumb-item>订单查询</el-breadcrumb-item>
          <el-breadcrumb-item>收藏品牌</el-breadcrumb-item>
          <el-breadcrumb-item>
            <el-dropdown placement="bottom">
              <span>我的小院<i class="el-icon-arrow-down"></i></span>
              <el-dropdown-menu>
                <el-dropdown-item>1</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-breadcrumb-item>
          <el-breadcrumb-item>
             <el-dropdown placement="bottom" trigger="click">
              <span>更多<i class="el-icon-arrow-down"></i></span>
              <el-dropdown-menu>
                <el-dropdown-item>1</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
   </el-row>

    <el-row style="margin-top:20px;">
          <el-col :span="5" style="text-align:center;" :xs="24">
           <el-link style="font-size:25px;">时尚小院</el-link>
          </el-col>
           <el-col :span="10" :xs="12">    
                 <el-form :model="form" inline >
               <el-form-item label="" size="small" prop="search">
                 <el-input type="text" :value="form.search" clearable  style="width:170%;" placeholder="做最美女人，对自己好一点">
                  <template slot="append">
                   <el-button type="primary" size="small"><i class="el-icon-search"></i></el-button>
                  </template>
                 </el-input>
               </el-form-item>
             </el-form>
           <el-row>
             <el-col :span="24" :xs="24">
               <el-breadcrumb separator="|">
                 <el-breadcrumb-item>保湿</el-breadcrumb-item>
                 <el-breadcrumb-item>面膜</el-breadcrumb-item>
                 <el-breadcrumb-item>洗面奶</el-breadcrumb-item>
                 <el-breadcrumb-item>补水</el-breadcrumb-item>
                 <el-breadcrumb-item>香水</el-breadcrumb-item>
                 <el-breadcrumb-item>眼霜</el-breadcrumb-item>
                 <el-breadcrumb-item>口红</el-breadcrumb-item>
                 <el-breadcrumb-item>护肤</el-breadcrumb-item>
               </el-breadcrumb>
             </el-col>
           </el-row>
           </el-col>
            <el-col :span="5" :push="2" :xs="24">
             <el-dropdown placement="bottom" trigger="hover">
               <el-button type="primary">
               <span class="el-icon-sell"></span>
               <span>购物车结算<span class="el-icon-arrow-down"></span></span>
               </el-button>
               <el-dropdown-menu>
                 <el-dropdown-item><span>支付</span></el-dropdown-item>
                         <el-dropdown-item><span>余额</span></el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
            </el-col>
        </el-row>

        <el-row style="background-color:black;color:white;font-size:15px;margin-top:20px;">
          <el-col :span="24" :xs="24">
            <el-row>
              <el-col :span="3" :xs="3">首页</el-col>
              <el-col :span="3" :xs="3">
                <el-link><span style="color:white;">极速免税店</span></el-link>
              </el-col>
              <el-col :span="3" :xs="3">
                <el-link><span style="color:white;">母婴特卖</span></el-link>
              </el-col>
              <el-col :span="3" :xs="3">
                <el-dropdown>
                  <span style="color:white;">美妆商场<i class="el-icon-arrow-down"></i></span>
                  <el-dropdown-menu>
                    <el-dropdown-item>
                      <el-row>
                        <el-col :span="8" :xs="8"><p><strong>大牌</strong></p>
                        
                        </el-col>
                        <el-col :span="8" :xs="8">
                          <p><strong>护肤</strong></p>
                          <p>兰蔻</p>
                        </el-col>
                        <el-col :span="8" :xs="8">
                          <p><strong>彩妆</strong></p>
                        </el-col>
                       
                      </el-row>

                    <el-row>
                     <el-col :span="8" :xs="8">
                           <p><strong>香氛</strong></p>
                        </el-col>
                        <el-col :span="8" :xs="8">
                           <p><strong>男士专区</strong></p>
                        </el-col>
                        <el-col :span="8" :xs="8">
                           <p><strong>热门新品</strong></p>
                        </el-col>
                    </el-row>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
              <el-col :span="3" :xs="3">国际轻奢</el-col>
              <el-col :span="3" :xs="3">服装运动</el-col>
              <el-col :span="3" :xs="3">鞋包配饰</el-col>
              <el-col :span="3" :xs="3">更多</el-col>
            </el-row>
          </el-col>
        </el-row>

      <el-row style="background-color:black;">
        <el-col :span="24" :xs="24">
          <el-carousel setActiveName="a">
            <el-carousel-item name="a">
              <el-image src="/static/lankou.jpg" style="height:88%;width:100%;"></el-image>
            </el-carousel-item>
            <el-carousel-item name="b">
               <el-image src="/static/baoshi.jpg" style="height:88%;width:100%;"></el-image>
            </el-carousel-item>
            <el-carousel-item name="c">
               <el-image src="/static/kangshuai.jpg" style="height:88%;width:100%;"></el-image>
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <h2 style="text-align:center;"><strong>每日新品</strong></h2>
        </el-col>
        <el-col :span="8" >
           <el-image src="/static/lankou.jpg" style=""></el-image>
           
        </el-col>
         <el-col :span="8">
            <el-image src="/static/baoshi.jpg" style=""></el-image>
         </el-col>
          <el-col :span="8">
             <el-image src="/static/kangshuai.jpg" style=""></el-image>
          </el-col>
      </el-row>
      <el-row style="position: fixed;top:0px;right:5px;height:100%;width:2%;background:salmon;color:white;">
        <el-col :span="24" :xs="24" style="margin-top:100px;">
            <p><el-dropdown placement="top-start">
              <i class="el-icon-user" style="font-size:30px;"></i>
              <el-dropdown-menu>
                  <el-dropdown-item>
                    <el-link>登录</el-link>
                    <el-link>注册</el-link>
                  </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            </p>
            <h4>
              <i class="el-icon-sell" style="font-size:30px;"></i><br>
              <h4 style="text-align:center;">购 <br> 物 <br> 车 <br>
            
              </h4>
             
            </h4>
            <p>
              <el-tooltip content="" placement="left">
                <span style="font-size:20px;margin-left:7px;">$</span>
                <template slot="content">
                  <span>我的钱包</span>
                </template>
              </el-tooltip>
            </p>
            <p>
              <el-tooltip content="" placement="left">
                <span style="font-size:48px;margin-left:5px;">*</span>
                <template slot="content">
                 <span>我的心愿</span>
                </template>
              </el-tooltip>
            </p>
            <p>
              <el-tooltip content="" placement="left">
                <span style="font-size:15px;margin-left:5px;">脚</span>
                <template slot="content">
                 <span>我的足迹</span>
                </template>
              </el-tooltip>
            </p>
        </el-col>
      </el-row>
 </el-row>
</template>

<script>
export default {
  
  data(){
   const generateData = _ => {
        const data = [];
        for (let i = 1; i <= 15; i++) {
          data.push({
            key: i,
            label: `备选项 ${ i }`,
            disabled: i % 4 === 0
          });
        }
        return data;
      }; 
    return { form:{
        search:""
      },

      dat: generateData(),
      valu: [1, 4],
      //picker是选择器的意思
      ti:[new Date(2018,10,1,8,20),new Date(2020,10,1,8,20)],//is-range范围
      startTime:"",
      a:3.7,
      color2:null,
       predefineColors: [
          '#ff4500',
          '#ff8c00',
          '#ffd700',
          '#90ee90',
          '#00ced1',
          '#1e90ff',
          '#c71585',
          'rgba(255, 69, 0, 0.68)',
          'rgb(255, 120, 0)',
          'hsv(51, 100, 98)',
          'hsva(120, 40, 94, 0.5)',
          'hsl(181, 100%, 37%)',
          'hsla(209, 100%, 56%, 0.73)',
          '#c7158577'
        ],
     // iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'],
      //colors:["black","blue","red"],
      colors:{2:"black",3:"salmon",4:"red",5:"skyblu"},
      co:null,
      pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
      endTime:"",
      data:"",
      time:new Date().toLocaleString(),
      mar:{
        30:"30分",
        50:"50分",
        40:{//控件基本有change blur focus 
          style:{//marks取值样式
            color:"red"
          },
          label:this.$createElement('strong',"40%")//屏幕阅读器标签
        }
      },
      su:[30,50],//show-stops是断点显示，输入框步伐
      suma:50,
      sumb:30,
      d:100,//:content
      t:true,
      e:this.$store.getters.he,
      data:[],
      value:[
        {
        value:"z",//键名不能相同
        label:"q",//键值用于显示
        children:[//子菜单
          {
            value:"s",
            label:"w"
          },
          {
            value:"e",
            label:"f"
          }
        ]
        },
         {
        value:"r",
        label:"q",
        children:[
          {
            value:"s",
            label:"w"
          },
          {
            value:"e",
            label:"f"
          }
        ]
        }
      ]
    }
  },
  methods:{
    
  }
}
</script>

